<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>通过HTML表格数据创建的柱状图</title>
	<style>
	#datatable {
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
}
td,th {
    border: 1px solid #ccc;
    padding: 4px 20px;
}

	</style>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 12:27:14
    From: https://code.hcharts.cn/demos/hhhhDg
*************************************************************************
-->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<p>数据表格</p>
<table id="datatable">
    <thead>
        <tr>
            <th></th>
            <th>小张</th>
            <th>小潘</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>苹果</th>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <th>梨</th>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <th>葡萄</th>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <th>香蕉</th>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <th>橘子</th>
            <td>2</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

	<script>
	$(function () {
    $('#container').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: '从 HTML 表格中提取数据并生成图表'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: '个',
                rotation: 0
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' 个' + this.point.name.toLowerCase();
            }
        }
    });
});
</script>

</body></html>